<template>
    <div>
        <a-card>
            <a-form class="flex flex-wrap" ref="formRef" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }" autocomplete="off">
                <a-form-item label="用户名" name="name" class=" md:w-64 w-full !mb-1">
                    <a-input v-model:value="formState.name" />
                </a-form-item>
                <a-form-item label="电话" name="phone" class=" md:w-64 w-full !mb-1">
                    <a-input v-model:value="formState.phone" />
                </a-form-item>
                <a-form-item class=" md:w-56 w-full !mb-1">
                    <a-button @click="getData" class="  ml-3 bg-base text-white">搜索</a-button>
                    <a-button @click="reset" class=" ml-1">清空</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <vxe-table align="center" :data="data" class=" mt-2">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="name" title="姓名"></vxe-column>
            <vxe-column field="phone" title="电话"></vxe-column>
            <vxe-column field="tokens" title="tokens"></vxe-column>
            <vxe-column field="used_tokens" title="已使用tokens"></vxe-column>
            <vxe-column field="questions" title="问题"></vxe-column>
            <vxe-column field="answers" title="回答"></vxe-column>
            <vxe-column field="invite_code" title="邀请码"></vxe-column>
            <vxe-column field="remark" title="备注"></vxe-column>
            <vxe-column field="created_at" title="创建时间"></vxe-column>
        </vxe-table>
        <vxe-pager align="left" @page-change="() => { getData() }" v-model:current-page="page.currentPage"
            v-model:page-size="page.pageSize" :total="page.totalResult">
        </vxe-pager>
    </div>
</template>

<script lang='ts' setup>
import list from '@/hooks/list';
import { users } from '@/request/api';
import type { Request } from '@/types/user';
const formState = reactive<Request>({
    name: '',
    phone: ''
})
const { data, page, getData, formRef, reset } = list(formState, users, 'users')
</script>